<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      border
      :header-cell-style="{textAlign: 'center',background:'#fafafa'}"
      :cell-style="{ textAlign: 'center' }"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="充值名称">
      </el-table-column>
      <el-table-column
        prop="operation"
        label="操作">
        <template slot-scope="props">
          <div class="opon">
            <!--<div @click="preview(props.row)">预览</div>-->
            <div @click="modify(props.row)">修改</div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="'充值类型：'+dialogname" :visible.sync="dialogTableVisible" :close-on-click-modal="false" @close="gridData = []">
      <el-table :data="gridData" stripe border height="400" @current-change="handleSelectionChange" v-loading="tableloading">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column property="money" label="充值金额">
          <template slot-scope="props">
            <el-input type="number" v-model="props.row.money" @change="moneyipt(props.row)" placeholder="请填写充值金额"></el-input>
          </template>
        </el-table-column>
        <el-table-column property="giveMoney" label="赠送金额">
          <template slot-scope="props">
            <el-input type="number" v-model="props.row.giveMoney" @change="givemoneyipt(props.row)" placeholder="请填写赠送金额"></el-input>
          </template>
        </el-table-column>
        <el-table-column property="defaultDisplay" label="默认选中">
          <template slot-scope="props">
            <el-switch v-model="props.row.isDefault" @change="handleSwitchChange(props.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column property="showText" label="显示文本">
          <template slot-scope="props">
            <el-input type="text" v-model="props.row.showText" placeholder="请填写显示文本"></el-input>
          </template>
        </el-table-column>
        <el-table-column property="tips" label="角标话术">
          <template slot-scope="props">
            <el-input type="text" v-model="props.row.tips" placeholder="请填写角标话术"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="80">
          <template slot-scope="props">
            <el-button type="danger" size="mini" @click="pridelete(props.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bombutton">
        <el-button type="primary" size="small" @click="editconserve">确认</el-button>
        <el-button type="danger" size="small" @click="dialogTableVisible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="addgear">新增充值位</el-button>
      </div>
    </el-dialog>

    <phonepreview ref="per" :amountList="amountList"></phonepreview>
  </div>
</template>

<script>
  import phonepreview from '../../../components/phone-preview/index.vue'
  export default {
    components:{
      phonepreview
    },
    data(){
      return {
        tableData: [
          {"name": "钱包充值", "type":0},{"name": "卡充值","type":2}
        ],
        gridData: [],
        dialogTableVisible: false,
        dialogname: '',  // 点击的模板类型名称
        tableloading: false,
        templatetrue: {},  // 选择的模板信息

        previewdialog: false,
        amountList: [],
        distinctionType: 0
      }
    },
    mounted(){
//      this.getdeploytemplate()
    },
    methods: {
      // 预览
      preview(e){
        this.$refs.per.previewdialog = true
        this.amountList = e.userPayTemplateOptionsVoList
      },
      // 修改
      modify(e){
        console.log(e)
        this.dialogTableVisible = true
        this.dialogname = e.name
        this.distinctionType = e.type
        this.getlist(e.type)
      },
      // 获取充值模板
      getlist(type){
        this.tableloading = true
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/user/pay/config/list'),
          method: 'get',
          params: this.$http.adornParams({
            'type': type
          })
        }).then((res) => {
          this.gridData = res.data.data
          this.gridData = this.gridData.map(item => {
            return {
              ...item,
              isDefault: item.defaultDisplay === 0 ? false : true
            };
          });
          console.log(this.gridData)
          this.tableloading = false
          this.distinctionType = type
        }).catch((err) => {

        });
      },
      handleSwitchChange(currentRow) {
        if (currentRow.isDefault) {
          this.gridData = this.gridData.map(row => {
            if (row !== currentRow) {
              return {
                ...row,
                isDefault: false,
                defaultDisplay: 0
              };
            }else {
              return {
                ...row,
                isDefault: true,
                defaultDisplay: 1
              };
            }
          });
        }
      },
      // 选择模板
      handleSelectionChange(val){
        console.log(val,"选择的模板")
        if(!val){
          return
        }
        this.gridData.forEach(e => {
          if(val.id != e.id){
            e.enabledFlag = false
          }else {
            e.enabledFlag = true
          }
        })
        this.templatetrue.merchantId = val.merchantId
        this.templatetrue.id = val.id
        this.templatetrue.chargeType = val.chargeType
      },
      // 修改启用模板
      Modify(){
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/user/pay/save/or/update'),
          method: 'post',
          data: this.$http.adornData({
            'list': this.gridData,
            'type': this.distinctionType

          })
        }).then(res => {
          console.log(res)
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.templatetrue = {}
          this.getdeploytemplate()
          this.dialogTableVisible = false
        }).catch(err => {
          console.log(err)
        })
      },

      // 监听充值金额事件
      moneyipt(e){
        this.gridData.forEach(i => {
          if(e.id == i.id){
            if(i.money < 0 || i.money == ''){
              this.$message({
                message: '充值金额不能小于0',
                type: 'warning'
              });
              i.money = 0
              i.giveMoney = 0
              i.showText = ''
              return
            }
            if(Number(i.money) < Number(i.giveMoney)){
              i.giveMoney = 0
              i.showText = ''
            }

            if(i.giveMoney > 0){
              i.showText = '送' + i.giveMoney + '元'
            }

          }
        })
      },

      // 监听赠送金额事件
      givemoneyipt(e){
        console.log(e)
        this.gridData.forEach(i => {
          if(e.id == i.id){
            if(i.money <= 0){
              this.$message({
                message: '请先输入充值金额',
                type: 'warning'
              });
              i.giveMoney = 0
              i.showText = ''
              return
            }
            if(i.giveMoney > 0){
              console.log(i.giveMoney.substr(0,1))
              if(i.giveMoney.substr(0,1) == '0'){
                i.giveMoney = i.giveMoney.slice(1)
              }
              i.showText =  '送' + i.giveMoney + '元'
            }else if(i.giveMoney == 0){
              i.giveMoney = 0
              i.showText = ''
              return
            }else {
              this.$message({
                message: '赠送金额不能小于0',
                type: 'warning'
              });
              i.giveMoney = 0
              i.showText = ''
              return
            }

            i.showText = '送' + i.giveMoney + '元'

          }
        })
      },

      pridelete(e){
        console.log(e)
        if(this.gridData.length == 1){
          this.$message({
            message: '充值项不能全部删除',
            type: 'warning'
          });
          return
        }

        this.$confirm(`删除后需再点击确认才可彻底删除，确定进行删除操作?`, '提示', {
          confirmButtonText: '知道了',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          for(let i = 0; i < this.gridData.length; i++){
            if(this.gridData[i].id == e.id){
              this.gridData.splice(i,1)
            }
          }
        }).catch(()=>{

        })
      },
      // 新增档位
      addgear(){
        let ifobj = this.gridData.slice(-1)[0]
        console.log(ifobj)
        if(ifobj.money <= 0){
          this.$message({
            message: '充值金额不能小于等于0',
            type: 'warning'
          });
          return
        }
        if(ifobj.giveMoney < 0 || ifobj.giveMoney === ''){
          this.$message({
            message: '赠送金额不能小于0',
            type: 'warning'
          });
          return
        }
        if(this.gridData.length >= 6){
          this.$message({
            message: '最多六种档位',
            type: 'warning'
          });
          return
        }
        this.gridData.push({
          orders: ifobj.orders + 1,
          money: '',
          giveMoney: '0',
          showText: '',
          tips: '',
          defaultDisplay: 0,
          distinctionType: this.distinctionType
        })
        console.log(this.gridData)
      },

      // 保存修改
      editconserve(){
        this.Modify()
      },
    }
  }
</script>

<style lang="scss" scoped>
  .opon {
    display: flex;
    justify-content: center;
    div {
      margin: 0 8px;
      color: #009FF1;
    }
    div:hover {
      cursor: pointer;
    }
  }
  .previewcs {
    color: #009FF1;
  }
  .previewcs:hover {
    cursor: pointer;
  }
  .bombutton {
    margin-top: 20px;
    button {
      padding: 8px 16px;
    }
  }
</style>
